import { Button, Modal } from "@shopify/polaris";
import { useState, useCallback } from "react";
import { changeTrue, changeFalse } from "./store";

import styled from "./index.module.less";
import { useDispatch, useSelector } from "react-redux";

function ModalExample() {
  const Store = useSelector((state: TheadersModal.state) => {
    return state.theadersModal.showModal;
  });
  const dispatch = useDispatch();

  const [active, setActive] = useState(true);

  const handleChange = () => {
    dispatch(changeFalse());
  };

  const activator = <Button onClick={handleChange}>Open</Button>;

  return (
    <div style={{ height: "500px" }}>
      <Modal
        activator={activator}
        open={Store}
        onClose={handleChange}
        title="放弃所有未保存的更改"
      >
        <Modal.Section>
          <div>如果放弃更改，您将删除自上次保存以来所做的所有编辑。</div>
        </Modal.Section>
        <Modal.Section>
          <div className={styled.BTN}>
            <div>
              <Button
                size="slim"
                onClick={() => {
                  dispatch(changeFalse());
                }}
              >
                继续编辑
              </Button>
            </div>
            <div className={styled.TWObtn}>
              <Button
                size="slim"
                destructive
                onClick={() => {

                  window.location.reload();
                  //   dispatch(changeTrue());
                }}
              >
                放弃更改
              </Button>
            </div>
          </div>
        </Modal.Section>
      </Modal>
    </div>
  );
}

export default ModalExample;
